<!--
* @author wn
* @date 2022/05/18 15:04:05
* @description: 自己封装的 checkbox 组件  支持双向数据绑定
!-->
<template>
	<div class="xtx-checkbox" @click="toggle">
		<i class="iconfont" :class="check ? 'icon-checked' : 'icon-unchecked'"></i>
		<span v-if="$slots.default">
			<slot />
		</span>
	</div>
</template>
<script>
import { ref } from 'vue'
export default {
	name: 'XtxCheckBox2',
	props: {
		modelValue: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, { emit }) {
		const check = ref(props.modelValue)
		const toggle = () => {
			check.value = !check.value
			emit('update:modelValue', check.value)
			emit('change', check.value)
		}
		return { check, toggle }
	},
}
</script>
<style scoped lang="less">
.xtx-checkbox {
	display: inline-block;
	margin-right: 2px;
	.icon-checked {
		color: @xtxColor;
		~ span {
			color: @xtxColor;
		}
	}

	i {
		position: relative;
		top: 1px;
	}
	span {
		margin-left: 2px;
	}
}
</style>
